<template>
	<div class="system-notice-container">
		<el-dialog title="发布消息" v-model="isShowDialog" width="65%">
			<el-form ref="pubNoticeFormRef" :model="formData" :rules="formRules" label-width="80px">
				<el-row :gutter="35">
					<el-col>
						<el-tabs v-model="active" tab-position="left">
							<el-tab-pane label="全体用户" name="allIn">
								<el-switch v-model="formData.allIn" active-text="是" inactive-text="否"></el-switch>
								<el-table ref="tableUserRef" :data="tab.user.datas" style="width: 100%" row-key="id">
									<el-table-column type="index" label="序号" align="cneter" width="60" show-overflow-tooltip></el-table-column>
									<!-- <el-table-column label="头像" width="50" show-overflow-tooltip>
										<template #default="scope">
											<el-image style="width: 30px; height: 30px"
												v-if="scope.row.avatar"
												:src="scope.row.avatar" 
												:preview-src-list="[scope.row.avatar]">
											</el-image>
											<el-image style="width: 30px; height: 30px"
												v-else
												src="/images/profile.png" 
												preview-src-list="['/images/profile.png']">
											</el-image>
										</template>
									</el-table-column> -->
									<el-table-column label="登录账号" prop="loginName" show-overflow-tooltip></el-table-column>
									<el-table-column label="用户名称" prop="userName" show-overflow-tooltip></el-table-column>
									<el-table-column label="手机号码" prop="phone" show-overflow-tooltip></el-table-column>
									<el-table-column label="邮箱账号" prop="email" show-overflow-tooltip></el-table-column>
									<el-table-column label="状态" show-overflow-tooltip width="70">
										<template #default="scope">
											<span v-if="scope.row.status == '0'" class="color-primary">正常</span>
											<span v-else-if="scope.row.status == '1'" class="color-info">停用</span>
											<span v-else class="color-danger">删除</span>
										</template>
									</el-table-column>
								</el-table>
								<el-pagination
									class="mt1"
									target-order="push"
									@current-change="tab.user.onPageCurrentChange"
									:pager-count="3"
									v-model:current-page="tab.user.pageNum"
									background
									v-model:page-size="tab.user.pageSize"
									layout="prev, pager, next"
									:total="tab.user.total"
									size="small"
								>
								</el-pagination>
							</el-tab-pane>
							<el-tab-pane label="指定用户" name="user">
								<el-transfer v-model="formData.userIds"
									filterable
									:titles="['待选用户', '已选用户']"
									:props="{'key': 'id', 'label': 'labelName'}"
									:data="tab.user.datas">
									<template #left-footer>
										<el-pagination
											class="mt1"
											target-order="push"
											@current-change="tab.user.onPageCurrentChange"
											:pager-count="3"
											v-model:current-page="tab.user.pageNum"
											background
											v-model:page-size="tab.user.pageSize"
											layout="prev, pager, next"
											:total="tab.user.total"
										>
										</el-pagination>
									</template>
									<template #right-footer>
										<span class="ml15 el-transfer-right-footer">已选择：{{formData.userIds?.length}}</span>
									</template>
								</el-transfer>
							</el-tab-pane>
							
							<el-tab-pane label="指定部门" name="dept">
								<el-transfer v-model="formData.deptIds"
									filterable
									:titles="['待选部门', '已选部门']"
									:props="{'key': 'id', 'label': 'deptName'}"
									:data="tab.dept.datas">
									<template #left-footer>
										<span class="ml15 el-transfer-right-footer">总数：{{tab.dept.total}}</span>
									</template>
									<template #right-footer>
										<span class="ml15 el-transfer-right-footer">已选择：{{formData.deptIds?.length}}</span>
									</template>
								</el-transfer>
							</el-tab-pane>
							
							<el-tab-pane label="指定角色" name="role">
								<el-transfer v-model="formData.roleIds"
									filterable
									:left-default-checked="[2, 3]"
									:right-default-checked="[1]"
									:titles="['待选角色', '已选角色']"
									:props="{'key': 'id', 'label': 'roleName'}"
									:data="tab.role.datas">
									<template #left-footer>
										<el-pagination
											class="mt1"
											target-order="push"
											@current-change="tab.role.onPageCurrentChange"
											:pager-count="3"
											v-model:current-page="tab.role.pageNum"
											background
											v-model:page-size="tab.role.pageSize"
											layout="prev, pager, next"
											:total="tab.role.total"
											size="small"
										>
										</el-pagination>
									</template>
									<template #right-footer>
										<span class="ml15 el-transfer-right-footer">已选择：{{formData.roleIds?.length}}</span>
									</template>
								</el-transfer>
							</el-tab-pane>
							
							<el-tab-pane label="指定岗位" name="post">
								<el-transfer v-model="formData.postIds"
									filterable
									:titles="['待选岗位', '已选岗位']"
									:props="{'key': 'id', 'label': 'postName'}"
									:data="tab.post.datas">
									<template #left-footer>
										<el-pagination
											class="mt1"
											target-order="push"
											@current-change="tab.post.onPageCurrentChange"
											:pager-count="3"
											v-model:current-page="tab.post.pageNum"
											background
											v-model:page-size="tab.post.pageSize"
											layout="prev, pager, next"
											:total="tab.post.total"
											size="small"
										>
										</el-pagination>
									</template>
									<template #right-footer>
										<span class="ml15 el-transfer-right-footer">已选择：{{formData.postIds?.length}}</span>
									</template>
								</el-transfer>
							</el-tab-pane>
							
							<el-tab-pane label="指定职级" name="rank">
								<el-transfer v-model="formData.rankIds"
									filterable
									:left-default-checked="[2, 3]"
									:right-default-checked="[1]"
									:titles="['待选职级', '已选职级']"
									:props="{'key': 'id', 'label': 'rankName'}"
									:data="tab.rank.datas">
									<template #left-footer>
										<el-pagination
											class="mt1"
											target-order="push"
											@current-change="tab.rank.onPageCurrentChange"
											:pager-count="3"
											v-model:current-page="tab.rank.pageNum"
											background
											v-model:page-size="tab.rank.pageSize"
											layout="prev, pager, next"
											:total="tab.rank.total"
											size="small"
										>
										</el-pagination>
									</template>
									<template #right-footer>
										<span class="ml15 el-transfer-right-footer">已选择：{{formData.rankIds?.length}}</span>
									</template>
								</el-transfer>
							</el-tab-pane>
							
							<el-tab-pane label="指定群组" name="group">
								<el-transfer v-model="formData.groupIds"
									filterable
									:left-default-checked="[2, 3]"
									:right-default-checked="[1]"
									:titles="['待选群组', '已选群组']"
									:props="{'key': 'id', 'label': 'groupName'}"
									:data="tab.group.datas">
									<template #left-footer>
										<el-pagination
											class="mt1"
											target-order="push"
											@current-change="tab.group.onPageCurrentChange"
											:pager-count="3"
											v-model:current-page="tab.group.pageNum"
											background
											v-model:page-size="tab.group.pageSize"
											layout="prev, pager, next"
											:total="tab.group.total"
											size="small"
										>
										</el-pagination>
									</template>
									<template #right-footer>
										<span class="ml15 el-transfer-right-footer">已选择：{{formData.groupIds?.length}}</span>
									</template>
								</el-transfer>
							</el-tab-pane>
						</el-tabs>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getUserList } from '/@/api/system/user/index';
import { getDeptList } from '/@/api/system/dept/index';
import { getRoleList } from '/@/api/system/role/index';
import { getPostList } from '/@/api/system/post/index';
import { getRankList } from '/@/api/system/rank/index';
import { getGroupList } from '/@/api/system/group/index';
import { pubNotice } from '/@/api/system/notice/index';
export default {
	name: 'notice/pub',
	setup(props, context) {
		const pubNoticeFormRef = ref();
		const state = reactive({
			isShowDialog: false,
			active: 'user',
			tab: {
				user: {
					datas: [],
					total: 0,
					pageNum: 1,
					pageSize: 10,
					onPageCurrentChange: (val: number) => {
						state.tab.user.pageNum = val;
						loadUsers({pageNum: val, pageSize: 10});
					}
				},
				dept: {
					datas: [],
					total: 0,
					pageNum: 1,
					pageSize: 10,
					onPageCurrentChange: (val: number) => {
						state.tab.dept.pageNum = val;
						loadDepts({pageNum: val, pageSize: 10});
					}
				},
				role: {
					datas: [],
					total: 0,
					pageNum: 1,
					pageSize: 10,
					onPageCurrentChange: (val: number) => {
						state.tab.role.pageNum = val;
						loadRoles({pageNum: val, pageSize: 10});
					}
				},
				post: {
					datas: [],
					total: 0,
					pageNum: 1,
					pageSize: 10,
					onPageCurrentChange: (val: number) => {
						state.tab.post.pageNum = val;
						loadPosts({pageNum: val, pageSize: 10});
					}
				},
				rank: {
					datas: [],
					total: 0,
					pageNum: 1,
					pageSize: 10,
					onPageCurrentChange: (val: number) => {
						state.tab.rank.pageNum = val;
						loadRanks({pageNum: val, pageSize: 10});
					}
				},
				group: {
					datas: [],
					total: 0,
					pageNum: 1,
					pageSize: 10,
					onPageCurrentChange: (val: number) => {
						state.tab.group.pageNum = val;
						loadGroups({pageNum: val, pageSize: 10});
					}
				}
			},
			formData: {
				allIn: false,
				userIds: [],
				deptIds: [],
				roleIds: [],
				postIds: [],
				rankIds: [],
				groupIds: [],
				noticeId: ''
			},
			formRules : {
				
			},
		});
		
		const loadUsers = (params: object) => {
			getUserList(params).then((res) => {
				if(res.code == 0){
					state.tab.user.datas = res.data;
					state.tab.user.total = res.total;
					state.tab.user.datas.forEach(item => {
						item.labelName = `${item.loginName} (${item.userName})`;
					})
				}
			});
		}
		
		const loadDepts = (params: object) => {
			getDeptList(params).then((res) => {
				if(res.code == 0){
					state.tab.dept.datas = res.data;
					state.tab.dept.total = res.total;
				}
			});
		}
		
		const loadRoles = (params: object) => {
			getRoleList(params).then((res) => {
				if(res.code == 0){
					state.tab.role.datas = res.data;
					state.tab.role.total = res.total;
				}
			});
		}
		
		const loadPosts = (params: object) => {
			getPostList(params).then((res) => {
				if(res.code == 0){
					state.tab.post.datas = res.data;
					state.tab.post.total = res.total;
				}
			});
		}
		
		const loadRanks = (params: object) => {
			getRankList(params).then((res) => {
				if(res.code == 0){
					state.tab.rank.datas = res.data;
					state.tab.rank.total = res.total;
				}
			});
		}
		
		const loadGroups = (params: object) => {
			getGroupList(params).then((res) => {
				if(res.code == 0){
					state.tab.group.datas = res.data;
					state.tab.group.total = res.total;
				}
			});
		}
		// 打开弹窗
		const openDialog = (row: any) => {
			state.isShowDialog = true;
			if(row){
				state.formData.noticeId = row.id;
			}
			loadUsers({pageNum: 1, pageSize: 10});
			loadDepts({pageNum: 1, pageSize: 10});
			loadRoles({pageNum: 1, pageSize: 10});
			loadPosts({pageNum: 1, pageSize: 10});
			loadRanks({pageNum: 1, pageSize: 10});
			loadGroups({pageNum: 1, pageSize: 10});
		};
		// 关闭弹窗
		const closeDialog = (row?: object) => {
			state.isShowDialog = false;
			for(var key in state.formData) {
				state.formData[key] = undefined;
			}
			pubNoticeFormRef.value.resetFields();
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 保存
		const onSubmit = () => {
			pubNoticeFormRef.value.validate(valid => {
				if(valid){
					let params = {
						allIn: state.formData.allIn,
						userIds: state.formData.userIds,
						deptIds: state.formData.deptIds,
						roleIds: state.formData.roleIds,
						postIds: state.formData.postIds,
						rankIds: state.formData.rankIds,
						groupIds: state.formData.groupIds,
						noticeId: state.formData.noticeId,
					}
					pubNotice(params).then((res) => {
						if(res.code === 0){
							ElMessage.success('发布成功');
							context.emit('submit');
							closeDialog(); // 关闭弹窗
						}
					});
				}
			});
		};
		
		return {
			pubNoticeFormRef,
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
};
</script>
<style scoped lang="scss">
.system-notice-container{
	.el-transfer{
		--el-transfer-panel-width: 300px;
		--el-transfer-panel-body-height: 380px;
		:deep .el-transfer-panel__filter{
			max-height: 32px;
		}
		:deep .el-transfer-panel__list.is-filterable {
			scrollbar-width: thin;
		}
	}
	.el-transfer-right-footer{
		color:var(--el-text-color-secondary);
		font-size: 12px;
	}
}
</style>
